<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="font/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            height: 900px;
            width: 100%;
            position: relative;
        }

        header .center .center_bottom .bottom_main .bm_left img {
            width: 100px;
            vertical-align: bottom;
        }

        header .center {
            background-color: rgb(223, 223, 223);
            border-radius: 25px 25px 0 0;
            text-align: center;
            height: 700px;
            width: 100%;
            border-radius: 2%;
            bottom: 0;
            position: absolute;
        }

        header .center .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 20px;
            height: 80px;
        }

        header .center .top .iconfont {
            font-size: 25px;
            margin-right: 10px;
        }

        header .center .top h3 {
            font-size: 22px;
            height: 40px;
        }

        header .center .top .you {
            font-size: 22px;
            height: 40px;
        }

        header .center_bottom {
            width: 94%;
            margin: 0 auto;
            height: 40vh;
        }

        header .center .center_bottom .bottom_main {
            margin: 20px auto;
            height: 160px;
            width: 100%;
            border-radius: 10px;
            background-color: rgb(241, 241, 241);
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        header .center .center_bottom .bottom_main .bm_left {
            position: relative;
        }

        header .center .center_bottom .bottom_main .bm_left p {
            position: absolute;
            bottom: 5px;
            background-color: rgba(240, 248, 255, 0.373);
            color: white;
            width: 100%;
        }

        header .center .center_bottom .bottom_main .bm_content {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
        }

        header .center .center_bottom .bottom_main .bm_right {
            width: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        header .center .center_bottom .bottom_main .bm_right button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid rgb(71, 151, 255);
            color: rgb(71, 151, 255);
            font-size: 18px;
        }

        header .center .center_bottom .bottom_main .bm_right button:nth-child(3) {
            color: white;
            background-color: rgb(71, 151, 255);
        }

        footer {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            position: fixed;
            align-items: center;
            height: 80px;
            bottom: 0;
            width: 100%;
            background-color: gray;
        }

        footer .bm_left {
            display: flex;
            align-items: center;
        }

        footer .iconfont {
            font-size: 60px;
            color: blue;
            margin-right: 10px;
        }

        footer .bm_content {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
        }

        footer button {
            height: 50px;
            width: 150px;
            margin-right: 40px;
            border-radius: 5px;
            font-size: 20px;
            color: white;
            background-color: rgb(19, 203, 5);
        }
    </style>
</head>

<body>
    <header id="app">
        <div class="center">
            <div class="top">
                <h3>已选商品<span v-text="num()"></span></h3>
                <div class="you"  @click="clear()"><span class="iconfont">&#xe627;</span>清空</div>
            </div>
            <div class="center_bottom">
                <div class="bottom_main item" v-for="(item,index) in tasklist" \:key="index">
                    <div class="bm_left">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="bm_content">
                        <p>{{item.name}}</p>
                        <p>{{item.desc}}</p>
                    </div>
                    <div class="bm_right">
                        <button @click="apps(item)" class="jian">-</button>
                        <p>{{item.count}}</p>
                        <button @click="adds(item)" class="jia">+</button>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="bm_left">
                <div class="icon"><span class="iconfont">&#xe609;</span></div>
                <div class="bm_content">
                    <span>￥{{zongjia()}}</span>
                    <p>另需配送费38元</p>
                </div>
            </div>
            <button>去结算</button>
        </footer>
    </header>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: {
            tasklist: [
                { id: 1, pic: './img/1.jpg', name: '秋刀鱼/斤', desc: '35.00', count: 1 },
                { id: 2, pic: './img/1.jpg', name: '鲜大带鱼/条', desc: '45.00', count: 1 },
                { id: 3, pic: './img/1.jpg', name: '鲜活全母皮皮虾/斤', desc: '85.00', count: 1 },
            ],
        },
        methods: {
            adds(item) {
                if (item.count < 5) {
                    item.count++
                }
            },
            apps(item) {
                if (item.count > 1) {
                    item.count--
                }
            },
            num() {
                var num = 0
                this.tasklist.map((item, index) => {
                    num += item.count
                }).join('')
                return num
            },
            zongjia(){
                var zongjia=0
                this.tasklist.map((item, index) => {
                    zongjia += item.count*item.desc
                }).join('')
                return zongjia
            },
            clear(){
                this.tasklist=[]
            }
        },
    })
</script>